<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>
<body>
    <div id="test"></div>

    <script type="text/babel">
        let arr1 = [1,2,3,4,5]
        let arr2 = [6,7,8,9,10]
        console.log(...arr1); //展开一个数据
        let arr3 = [...arr1,...arr2] //连接数据

        // 在函数中使用
        function sum(...numbers){
            return numbers.reduce(
                (preValue,currentValue)=>{
                    return preValue + currentValue
                }
            )
        }
        console.log(sum(1,2,3,4));

        // 构造字面量对象时使用展开语法
        let person = {name:'lili',age:18}
        let person2 = {...person}
        person.name = 'jerary'
        console.log(person)
        console.log(person2)

        // 合并
        let person3 = {...person,name:'sadong',address:'地球'}
        console.log(person3)

    </script>
    
</body>
</html>